<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="layui/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/form.css">

</head>

<body>


    <form class="layui-form regForm">
        <br>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="text" name="username" required lay-verify="required|user" placeholder="用户名" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required|pwd" placeholder="密码" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="password" name="rePassword" required lay-verify="required|rePwd" placeholder="重复密码" class="layui-input" autocomplete="off">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-primary" lay-submit lay-filter="reg" style="width:50%;" type="button">注册</button>
                <a href="login.html" style="position:relative;float:right;top:15px;" id="toLogin">已有账号，立即登陆</a>
            </div>
        </div>
    </form>
    <script src="js/jquery.min.js"></script>
    <script src="layui/layui.js"></script>
    <script src="layui/lay/modules/layer.js"></script>
    <script src="js/index.js"></script>
    <script>
        $(document).ready(function(){
            $.ajax({
                url:'/getImage?'+Date.parse(new Date()),
                type:'get',
                success:function(){
                    $('#code').attr('src',this.url);
                }

            });
        });
    </script>
    <script>
        layui.use('form', function() {
            var form = layui.form;
            form.verify({
                user: [
                    /^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$/, "用户名不能出现特殊字符"
                ],

                pwd: function(value, item) {
                    if (value === "") {
                        return "密码不能为空";
                    }
                    var Digital = /\d/;
                    var Letters = /[a-zA-Z]/;
                    if (!(Digital.test(value) && Letters.test(value) && value.length >= 0)) {
                        return '密码必须含有字母和数字';
                    }
                },
                rePwd: function(value, item) {
                    if (value === "") {
                        return "请输入二次密码";
                    }
                    var pwd = $("input[name='password']").val();
                    if (pwd != value) {
                        return '密码与确认密码不正确';
                    }

                }
            });
            form.on('submit(reg)',function(data){
                $.ajax({
                    url:'http://localhost:8080/api/register',
                    type:'POST',
                    data:JSON.stringify(data.field),
                    contentType:"application/json",
                    success:function(result){
                        if(result.code!=200){
                            return;
                        }
                        layer.msg(result.msg,{
						   time:500
					   });
					   var storage=window.localStorage;
					   storage.setItem("uid",result.data.uid)
					   self.location='index.html';
                   }

               });
            });
        });
    </script>

</body>

</html>